<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局2 - Layui</title>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    {load href="__STATIC__/admin/layui.css"}
    {load href="__STATIC__/admin/style.css"}
    <style>
        body{background: #f2f2f2;font:14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif; }
        #tab-body-con{width: 100%;overflow-y: hidden}
        #tab-body-con .layui-tab-item{height: 100%;}

        .layadmin-pagetabs{overflow: hidden}
    </style>
</head>
<body class="layui-layout-body ">
<div class="layui-layout layui-layout-admin">
    <!--顶部菜单-->
    <div class="layui-header">
        __STATIC__
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="" title=""><i class="layui-icon layui-icon-website"></i></a></li>
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-refresh-3"></i></a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-notice"></i></a></li>
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-theme"></i></a></li>
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-note"></i></a></li>
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-screen-full"></i></a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
    <!--侧边菜单-->

    <div class="layui-side layui-bg-black">

        <div class="layui-side-scroll ">
            <div class="logo-block">layui 后台布局</div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree main-left-menu" lay-filter="right-menu">
                <li class="layui-nav-item layui-nav-itemed" >
                    <a class="" href="javascript:;" >页面测试</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">表单提交页面</a></dd>
                        <dd><a lay-href="t1.html" lay-id="{:url('index/info')}">页面一</a></dd>
                        <dd><a lay-href="t2.html" lay-id="t2.html">页面二</a></dd>
                        <dd><a lay-href="t3.html" lay-id="t3.html">列表三</a></dd>
                        <dd><a lay-href="t4.html" lay-id="t4.html">页面四</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed" >
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home"></i> 云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>
    <!--页面标签-->
    <div class="layadmin-pagetabs">
        <div class="item float-li"><div class="layui-icon layadmin-tabs-control layui-icon-prev" id="carousel-left"></div> </div>
        <div class="layadmin-pagetabs-con">
            <div class="layui-tab layadmin-tab" lay-allowClose="true" lay-filter="lay-frame" id="carousel-layadmin-pagetabs">
                <ul class="layui-tab-title" id="tab-header">
                    <li class="layui-this " lay-id="t1.html">
                        <i class="layui-icon layui-icon-home"></i>
                        <i class="layui-icon layui-unselect layui-tab-close"></i>
                    </li>
                </ul>

            </div>
        </div>
        <div class="item float-li-right"><div class="layui-icon layadmin-tabs-control layui-icon-next" id="carousel-rig"></div></div>

    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab-content lay-frame" id="tab-body-con">
            <div class="layui-tab-item layui-show"><iframe src="{:url('index/info')}" frameborder="0" width="100%" height="100%"></iframe></div>
        </div>
        <!--主题内容-->
    </div>


    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="__STATIC__/layui/layui.js"></script>
<script src="__STATIC__/jquery-3.3.1.min.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
    var element = layui.element;

    // 监听选项卡事件 #lay-frame
    element.on('tab(lay-frame)', function(data){
        var index = data.index;
        //先移除样式，再增加layui-show
        $("#tab-body-con>.layui-tab-item").removeClass("layui-show").eq(index).addClass("layui-show")
    });
    // 监听选项卡删除事件
    element.on('tabDelete(lay-frame)', function(data){
        var index = data.index;
        // 删除选项卡主体内容
        $("#tab-body-con div.layui-tab-item").eq(index).remove()
    });

    // 指定tab头部与主体
    element.tab({
        headerElem: '#tab-header>li' //指定tab头元素项
        ,bodyElem: '#tab-body-con>div.layui-tab-item' //指定tab主体元素项
    });


    // 点击左侧菜单
    $('.layui-nav-child dd a').on('click', function(){
        $name = $(this).text()
        $href = $(this).attr('lay-href');
        $layId = $(this).attr('lay-id');   // 格式： t1.html

        // 计算头部选项卡的lay-id 存在次数
        $layIdLength = $("#tab-header li[lay-id='"+$layId+"']", window.parent.document).length;

        if($layIdLength<1){
            // 新建选项卡
            element.tabAdd('lay-frame', {
                title: $name
                ,content: addFrame($href)
                ,id: $layId
            });
        }
        // 移动到头部选项卡
        element.tabChange('lay-frame', $layId)

    });

    // 增加选项卡主体内容
    function addFrame($href){
        $str = '<div class="layui-tab-item ">' +
               '<iframe src="'+$href+'" frameborder="0" width="100%" height="100%"></iframe>' +
               '</div>';
        $("#tab-body-con").append($str)
    }
});



$(document).ready(function(){
    main();
});
// 浏览器框架大小变动
window.onresize=function(){
    main();
}
// 框架变动时间
function main(){
    // 显示器分辨率
    $h =  document.documentElement.clientHeight;
    $height = $h- 160;
    $("#tab-body-con ").css('height',$height);
}


</script>
</body>
</html>